<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link  rel="stylesheet" type="text/css" href="../../css/resources/css/ext-all.css"></link>
<link  rel="stylesheet" type="text/css" href="../../css/Spinner.css"></link>
<script type="text/javascript" src="../../ext3.2.1/ext-base.js"></script>
<script type="text/javascript" src="../../ext3.2.1/ext-all.js"></script>
<script type="text/javascript" src="../../ext3.2.1/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../js/DateTimeField.js"></script>
<script type="text/javascript" src="../../js/Spinner.js"></script>
<script type="text/javascript" src="../../js/SpinnerField.js"></script>
<script type="text/javascript">
	Ext.onReady(function(){
		  Ext.QuickTips.init();  
		  var form;

		//查询条件：员工编号、员工姓名、性别、入职时间、所在部门id
			var usercodeText=new Ext.form.TextField ({
				fieldLabel:'员工编号',
				width:100,
				id:'userCode',
				name:'queryUser.userCode',
				allowBlank:true,
				msgTarget: 'side'  // side  title under
				//blankText:'编码不能为空'
			});
		
			var userNameText=new Ext.form.TextField ({
				fieldLabel:'员工姓名',
				width:100,
				id:'userName',
				name:'queryUser.userName',
				allowBlank:true,
				msgTarget: 'side'  // side  title under
				//blankText:'编码不能为空'
			});
		
			//
			var sexcmb=new Ext.form.ComboBox ({
				//hiddenName才是提交到后台的input的name,这里hiddenName的值不能与id相同，否则你会出问题
				hiddenName:'queryUser.sex',
				width:150,
	            emptyText:'--请选择--',
	            forceSelection: true,
				fieldLabel:'性别',
				displayField:'sexName',
				valueField:'sexName',
				id:'userInfoSex',
				typeAhead :true,
				selectOnFocus:true,
				triggerAction  :'all',
				mode :'local',
				store:new Ext.data.JsonStore({
						data:[{"sexName":"男"},{"sexName":"女"}],
						fields:['sexName']})
			});
			var deptcmb=new Ext.form.ComboBox ({
				//hiddenName才是提交到后台的input的name,这里hiddenName的值不能与id相同，否则你会出问题
				hiddenName:'queryUser.deptId',
				width:150,
	            emptyText:'--请选择--',
	            forceSelection: true,
				fieldLabel:'所在部门',
				displayField:'deptName',
				valueField:'deptId',
				id:'department',
				typeAhead :true,
				selectOnFocus:true,
				triggerAction  :'all',
				mode :'local',
				store:new Ext.data.JsonStore({
					url:'user/deptInfo_load.do',
					autoLoad:true,
					fields:['deptName','deptId']
				})
			});
			var startDateText=new Ext.ux.form.DateTimeField({
				name:'queryUser.startDate',
				fieldLabel:'入职日期     从',
				format:'y-m-d H:i:s',
				width:150
		//		name:'startDate'
			});
			var endDateText=new Ext.ux.form.DateTimeField({
				name:'queryUser.endDate',
				fieldLabel:'到',
				format:'y-m-d H:i:s',
				width:150
			//	name:'endDate'
			});
			//查询form
			var button=new Ext.Button({
				id:'btnQuery',
				width:70,
				text:'查询',
				handler:function(){
				/*	store.load({
						start:0,
						limit:10,
						userCode:Ext.getCmp('userCode').getValue(),
						userInfoSex:Ext.getCmp('userInfoSex').getValue(),
						department:Ext.getCmp('department').getValue()
					});*/
					  if( queryForm.getForm().isValid() ){
						  queryForm.form.submit({   
					        	waitMsg : '正在查询数据....',   
					            url:'user/userInfo_loadByPage.do',   
					            method:'post', 
					            params:{start:0,limit:10},
					            //后台result.addProperty("success", false); 时执行
					            failure:function(){
					            	Ext.Msg.alert("提示","查询数据失败，请重试。") ;
					            },
					            //后台 result.addProperty("success", true); 时执行
						        success:function(form,action){  
						            var result = Ext.util.JSON.decode(action.response.responseText);
						            //从result中加载数据，false替换原来store中的数据,true是追加新数据
						            store.loadData(result,false);
						        }
						       }); 
					      }
					}
			});
		   var queryForm = new Ext.form.FormPanel({
			   		renderTo:'queryForm',
					frame:true,
					border:false,
					buttonAlign:'right',
					labelAlign:'right',
				//	width:350,
					region:'north',
					layout:'form',
					//height:240,
					items:[{
						layout:'column',
						items:[{
							layout:'form',
							columnWidth:.2,
							items:[usercodeText]
						},{
							layout:'form',
							columnWidth:.25,
							items:[sexcmb]
						},{
							layout:'form',
							columnWidth:.25,
							items:[deptcmb]
						}]
					},{
						layout:'column',
						items:[{
							layout:'form',
							columnWidth:.2,
							items:[userNameText]
						},{
							layout:'form',
							columnWidth:.25,
							items:[startDateText]
						},{
							layout:'form',
							columnWidth:.25,
							items:[endDateText]
						},{
							layout:'form',
							columnWidth:.3,
							items:[button]
						}]
					}]
				});
			
		//查询条件：员工编号、性别、入职时间、所在部门id  
		  
		  
		var column=new Ext.grid.ColumnModel([
		{header:'用户ID',hidden:true,width:100,dataIndex:'userId',sortable:true},
		{header:'userCode',width:100,dataIndex:'userCode',sortable:true},
		{header:'userName',width:100,dataIndex:'userName',sortable:true},
		{header:'loginName',width:100,dataIndex:'loginName',sortable:true},
		{header:'loginPwd',width:100,dataIndex:'loginPwd',sortable:true},
		{header:'entryDate',width:100,dataIndex:'entryDate',sortable:true},
		{header:'deptId',hidden:true,width:100,dataIndex:'deptId',sortable:true},
		{header:'deptName',width:100,dataIndex:'deptName',sortable:true},
		{header:'roleId',hidden:true,width:100,dataIndex:'roleId',sortable:true},
		{header:'roleName',width:100,dataIndex:'roleName',sortable:true}
		]);
		
		var store=new Ext.data.JsonStore({
			//--
			url:'user/userInfo_loadByPage.do',
			root: 'result',
				// idProperty:'id',
			totalProperty:'totalProperty',
			//autoLoad:true,
			fields:['userId','userCode','userName','loginName','loginPwd','entryDate','deptId','deptName','roleId','roleName']
		});
		
		var grid=new Ext.grid.GridPanel({
			cm:column,
			region:'center',
			renderTo:'userGrid',	
			store:store,
		//	renderTo:'userGrid',
			height:document.body.clientHeight,
			
			tbar:['->',{
				text:'查看',
				handler:function(){
					var record=grid.getSelectionModel().getSelected();
					if(record ==null){
						alert("请选择要查看的人员信息");
					}else{
						Ext.Ajax.request({
		        			url:'user/userInfo_getUserInfo.do',
		        			params:{
		        				userId:record.get("userId")
		        			},
		        			/*failure:function(response,options){
		        				//
		        				alert("发送查询个人信息请求失败！");
		        			},
		        			success:function(response,options){
		        				var result = Ext.util.JSON.decode(response.responseText);
		        				if(result.success){
		        					//对应后台jobj.addProperty("success", true) ; 情况：后台查询成功
	        						showWindow("");
		        					Ext.getCmp("btnConfirm").setVisible(false);//设置确定按钮不可见
		        					form.getForm().setValues({
		        	        			"user.loginName" : result.loginName,
		        	        			"user.userCode" : result.userCode,
		        	        			"user.loginPwd": result.loginPwd,
		        	        			"user.userId": result.userId,
		        	        			"user.entryDate": result.entryDate 
		        	        		});
		        				}else{
		        					//对应后台this.jsonString = "{success:false}"; 情况
	        						alert("后台查询个人信息请求失败！");
		        				}
		        			}*/
		        			
		        			//callback 等价于 success +　failure:建议使用callback
		        			callback:function(options,success,response){
		        				if(success){
		        					//向服务器发送请求成功
		        					var result = Ext.util.JSON.decode(response.responseText);
		        					if(result.success){
		        						//对应后台jobj.addProperty("success", true) ; 情况：后台查询成功
		        						//遮盖父窗口，类似于模态窗口
		        						Ext.getBody().mask();
		        						showWindow("");
		        						
		        						//设置查看不可编辑
		        						
			        					Ext.getCmp("btnConfirm").setVisible(false);//设置确定按钮不可见
			        					Ext.getCmp('dept').setRawValue(result.deptName);//设置显示值
			        					Ext.getCmp('dept').setDisabled(true);//.setEditable(false);
			        					
			        					Ext.getCmp('role').setRawValue(result.roleName);//设置显示值
			        					Ext.getCmp('role').setDisabled(true);//.setEditable(false);
			        					
			        					form.getForm().setValues({
			        						"user.userName" : result.userName,
			        	        			"user.loginName" : result.loginName,
			        	        			"user.userCode" : result.userCode,
			        	        			"user.loginPwd": result.loginPwd,
			        	        			"user.userId": result.userId,
			        	        			"user.entryDate": result.entryDate 
			        	        		});
		        					}else{
		        						//对应后台this.jsonString = "{success:false}"; 情况
		        						alert("后台查询个人信息失败！");
		        					}
		        					
		        				}else{
		        					//向服务器发送请求失败
		        					alert("发送查询个人信息请求失败！");
		        				}
		        			}
		        			
		        		});
					}
					/*//不调用后台从grid获取一行数据方式：
					showWindow("");
					//设置确定按钮不可见
					Ext.getCmp('btnConfirm').setVisible(false);
					if(record ==null){
    					alert("请选择要查看的人员信息");
    					Ext.getBody().unmask();
    				}else{
					form.getForm().setValues({
	        			"user.loginName" : record.get("loginName"),
	        			"user.userCode" : record.get("userCode"),
	        			"user.loginPwd": record.get("loginPwd") ,
	        			"user.userId": record.get("userId"),
	        			"user.entryDate": record.get("entryDate") 
	        		});}*/
	        		
				}
			},{
				text:'增加',
				handler:function(){
					//遮盖父窗口，类似于模态窗口
					Ext.getBody().mask();
					showWindow("user/userInfo_save.do");
				}
			},{
				text:'删除',
				handler:function(){
					var record=grid.getSelectionModel().getSelected();
					if(record!=null){
						Ext.Ajax.request({
							url:'user/userInfo_delete.do',
							params:{
								userId:record.get("userId")
							},
							success:function(){
								alert("删除成功");
								store.reload();//刷新页面数据
							},failure:function(){
								alert("删除失败");
							}
							
						});
					}else{
						alert("请选择要删除的信息");
					}
				}
			},{
				text:'修改',
				handler:function(){
					var record=grid.getSelectionModel().getSelected();
					
					if(record ==null){
    					alert("请选择要修改的人员信息");
    				}else{
    					//遮盖父窗口，类似于模态窗口
						Ext.getBody().mask();
    					showWindow("user/userInfo_update.do");
    					//设置值
    					Ext.getCmp('dept').setValue(record.get('deptId'));
    					//设置部门显示值
    					Ext.getCmp('dept').setRawValue(record.get('deptName'));
    					
    					//设置值
    					Ext.getCmp('role').setValue(record.get('roleId'));
    					//设置角色显示值
    					Ext.getCmp('role').setRawValue(record.get('roleName'));
    					
					form.getForm().setValues({
						"user.userName" : record.get("userName"),
	        			"user.loginName" : record.get("loginName"),
	        			"user.userCode" : record.get("userCode"),
	        			"user.loginPwd": record.get("loginPwd") ,
	        			"user.userId": record.get("userId"),
	        			"user.entryDate": record.get("entryDate")
	        		});}
				}
			}],
			bbar:new Ext.PagingToolbar({
				pageSize : 10, //每页显示几条
				store : store,
				beforePageText:"当前第",   
	            afterPageText:"页，共{0}页",   
	            lastText:"尾页",   
	            nextText :"下一页",   
	            prevText :"上一页",   
	            firstText :"首页",                           
		        displayInfo:true, 
		        displayMsg:'显示第{0}条数据到{1}条数据,一共有{2}条', 
		        emptyMsg:'没有记录'
			})
		});
		//分页store.load放在最后
		store.load(
				//add jin_z
				{params:{start:0,limit:10}}
			); //调用后台加载数据
			
		
		//显示窗口，窗口中包含一个form,form中包含一些元素
		function showWindow(urlString){
		//var deptStore=	new Ext.data.JsonStore({
			//	url:'',
				//fields:['deptId','deptName']
			//});
		
		var userNameText=new Ext.form.TextField({
			fieldLabel:'员工姓名',
			width:150,
			name:'user.userName',
			allowBlank:false,
			msgTarget: 'qtip',  // side  title under
			blankText:'员工姓名不能为空'
		});
		
		var userText=new Ext.form.TextField({
			fieldLabel:'员工登录用户名',
			width:150,
			name:'user.loginName',
			allowBlank:false,
			 msgTarget: 'qtip',  // side  title under
			blankText:'登录用户名不能为空'
		});
		var codeText=new Ext.form.TextField ({
			fieldLabel:'员工编号',
			width:100,
			name:'user.userCode',
			allowBlank:false,
			 msgTarget: 'side',  // side  title under
			blankText:'编码不能为空'
		});
		var deptcmb=new Ext.form.ComboBox ({
			//hiddenName才是提交到后台的input的name,这里hiddenName的值不能与id相同，否则你会出问题
			hiddenName:'user.deptId',
            emptyText:'--请选择--',
            forceSelection: true,
			fieldLabel:'所在部门',
			displayField:'deptName',
			valueField:'deptId',
			id:'dept',
			typeAhead :true,
			selectOnFocus:true,
			triggerAction  :'all',
			mode :'local',
			store:new Ext.data.JsonStore({
				url:'user/deptInfo_load.do',
				autoLoad:true,
				fields:['deptName','deptId']
			}),
			allowBlank:false,
			blankText:'所在部门不能为空'
		});
		var rolecmb=new Ext.form.ComboBox ({
			//hiddenName才是提交到后台的input的name,这里hiddenName的值不能与id相同，否则你会出问题
			hiddenName:'user.roleId',
            emptyText:'--请选择--',
            forceSelection: true,
			fieldLabel:'所属角色',
			displayField:'roleName',
			valueField:'roleId',
			id:'role',
			typeAhead :true,
			selectOnFocus:true,
			triggerAction  :'all',
			mode :'local',
			store:new Ext.data.JsonStore({
				url:'user/roleInfo_load.do',
				autoLoad:true,
				fields:['roleName','roleId']
			}),
			allowBlank:false,
			blankText:'所属角色不能为空'
		});
		var passText=new Ext.form.TextField({
			fieldLabel:'员工密码',
			width:100,
			name:'user.loginPwd',
			inputType:'password',
			allowBlank:false,
			 msgTarget: 'under',  // side  title under
			blankText:'密码不能为空'
			
		});
		var IdText=new Ext.form.TextField({
			hidden:true,
			width:100,
			name:'user.userId'
			
		});
		var dateText=new Ext.ux.form.DateTimeField({
			fieldLabel:'入职日期',
			format:'y-m-d H:i:s',
			width:150,
			name:'user.entryDate'
		});
		
			 form=new Ext.form.FormPanel({
				frame:true,
				border:false,
				width:350,
				height:240,
				items:[userNameText,userText,codeText,passText,dateText,IdText,deptcmb,rolecmb],
				buttons:[{
					id:'btnConfirm',
					text:'确定',
					handler:function(){
						  if( form.getForm().isValid() ){
							  form.form.submit({   
					        	waitMsg : '正在提交数据....',   
					            url:urlString,   
					            method:'post', 
					            failure:function(){
					            	Ext.Msg.alert("提示","操作失败，请重试。") ;
					            },
					           success:function(form,action){  
					            	var result = Ext.util.JSON.decode(action.response.responseText);
					            	//if(result.success==true) {
					            			win.close() ;
					            			store.reload();
					            			//使父窗口可编辑，不遮盖
					            			Ext.getBody().unmask();
					            		
					            	//}else{
					            	//	Ext.Msg.alert("提示","操作失败，请重试。") ;
					            	//}
					            }
						          }); 
						       }
							}
					}]
				
			});
			
			var win=new Ext.Window({
				title:'人员信息',
				items:[form],
				width:350,
				 xtype:'form',
				x:100,
				y:20,
				//窗口是否可以改变大小
				resizable:false,
				//窗口是否可拖拽移动
				draggable:false,
				//窗口销毁前使父窗口显示可编辑。变成不是遮盖状态
				listeners:{'beforedestroy':function(){Ext.getBody().unmask();}}
			});
			win.show();
		}
		
		new Ext.Viewport({
			layout:'border',
			//renderTo:'userGrid',	
			border:false,
			items:[queryForm,grid]
			
		});
	});
</script>
</head>
<body>
<div id="queryForm"></div>
<div id="userGrid"></div>
</body>
</html>